<template>
  <div id="app">
    <swiper ref="swiper" :options="swiperOptions">
      <swiper-slide v-for="(item, index) in imgList" :key="'swiper' + index">
        <div style="padding: 0 120px">
          <img class="swiper-slide__img" :src="item.picUrl" alt="" />
        </div>
      </swiper-slide>
      <div class="swiper-button-prev" @click="buttonPrev" slot="button-prev"></div>
      <div class="swiper-button-next" @click="buttonNext" slot="button-next"></div>
    </swiper>
    <div class="swiper gallery-thumbs">
      <div class="swiper-wrapper">
        <div class="swiper-slide" v-for="(item, index) in imgList" :key="'thumbs' + index" @click="change(index)"
          :class="number == index ? 'cellActive' : ''">
          <div class="swiperImg">
            <img class="swiper-slide__img2" :src="item.picUrl" alt="" />
          </div>
        </div>
      </div>
      <div class="swiper-button-prev" slot="button-prev"></div>
      <div class="swiper-button-next" slot="button-next" id="myNext"></div>
    </div>
  </div>
</template>
 
<script>
import { carouselList } from "@/api/home";
import { Swiper, SwiperSlide } from 'vue-awesome-swiper'
import 'swiper/css/swiper.css'
export default {
  name: "App",
  components: {},
  data () {
    return {
      number: 0,
      swiperOptions: {
        spaceBetween: 10,//大轮播图间距
        navigation: {//大轮播图的切图按钮，如果想放在轮播图中可以看swiper官方文档
          nextEl: ".swiper-button-next",
          prevEl: ".swiper-button-prev",
        },
        thumbs: {
          swiper: {
            el: ".gallery-thumbs",
            slidesPerView: 6,//缩略图显示张数
            slidesPerGroup: 6,//缩略图每组切图张数
            spaceBetween: 10,//缩略图间距
            slideToClickedSlide: true,
            navigation: {//缩略图的切图按钮，如果想放在轮播图中可以看swiper官方文档
              nextEl: ".swiper-button-next",
              prevEl: ".swiper-button-prev",
            },
          }, 
          autoScrollOffset: true,
        },
      },
      imgList: [],
    };
  },
  mounted () { 
    this.getList()
  },
  methods: {
    async getList () {
      this.loading = true;
      const res = await carouselList(this.addDateRange({
        pageIndex: 1,
        pageSize: 200,
      }))
      this.loading = false;
      if (res.code === 200) {
        this.imgList = res.data || [];
        setTimeout(() => {
          const swiperTop = this.$refs.swiperTop.$swiper
          const swiperThumbs = this.$refs.swiperThumbs.$swiper
          swiperTop.controller.control = swiperThumbs
          swiperThumbs.controller.control = swiperTop
        }, 0);
      } else {
        this.imgList = [];
      }
    },
    buttonNext () {
      this.number = this.number + 1;
      //这里因为一些原因我找不到它原来问题，但我解决了自己问题了，这里是六张一组缩列图，当第七张的时候缩列图就该切组
      if (this.number == 6) {
        document.getElementById("myNext").click();
      }
    },
    buttonPrev () {
      this.number = this.number - 1;
    },
    change (index) {
      this.number = index;
    },
  },
};
</script>
 
<style>
html {
  background-color: #121212;
}
</style>
 
<style lang="scss" scoped>
#app {
  width: 100%;
  height: calc(100vh - 86px);
  margin: 200px auto 0;
}

.swiper-slide {
  &__img {
    width: 100%;
    height: 600px;
  }
}

.swiper {
  &.gallery-thumbs {
    position: relative;
    overflow: hidden;
    box-sizing: border-box;
    height: 150px;
    padding: 10px 60px;
    background-color: rgb(105, 105, 105);

    &::before,
    &::after {
      z-index: 2;
      position: absolute;
      top: 0;
      content: "";
      height: 150px;
      width: 60px;
      background-color: rgb(105, 105, 105);
    }

    &::before {
      left: 0;
    }

    &::after {
      right: 0;
    }

    .swiper-button-next,
    .swiper-button-prev {
      top: 50% !important;
      transform: translateY(-50%) !important;
      width: 40px;
      height: 100px;
      margin-top: 0 !important;
      border-radius: 8px;
      color: #f3f4f4;
      background-color: rgba(0, 0, 0, 0.7);

      &::after {
        font-size: 2rem;
      }
    }
  }

  // &.gallery-thumbs .swiper-slide {
  //   opacity: 0.4;
  //   overflow: hidden;
  // }
  // &.gallery-thumbs .swiper-slide-thumb-active {
  //   border: 2px solid red;
  // }
}

.swiperImg {
  width: 171px;
  height: 120px;
}

.swiper-slide__img2 {
  height: 120px;
  width: 100%;
}

.cellActive {
  border: 2px solid red;
}
</style>